<template>
	<view>
		<view class="swiperbox">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view class="scroll-view-item_H" v-for="(item,index) in list" :key="index"
					:style="{'background':index!==navindex?'#F7F7F7':'','color':index==navindex?'#FF6229':'#222222'}"
					@click="changeindex(index)">
					{{item}}
				</view>
			</scroll-view>
		</view>
		<!-- use_type  使用范围 1全平台 2商城 3外卖 -->
		<!-- coupon_type  类型 1满减券 2折扣券 3现金券 -->
		<view style="height: 96rpx;"></view>
		<view class="box" v-for="(item,index) in couponlist" :key="index">
			<view class="listbox">
				<view class="pricebox" v-if="item.coupon_type==1">
					￥
					<view>{{parseFloat(item.coupon_money)}}</view>
				</view>
				<view class="pricebox" v-if="item.coupon_type==2">
					<view>{{item.discount_percent/10}}折</view>
				</view>
				<view class="pricebox" v-if="item.coupon_type==3">
					￥
					<view>{{parseFloat(item.coupon_money)}}</view>
				</view>
				<view class="couponinfo">
					<view class="rule">满{{item.usable_money}}元使用</view>
					<view style="font-size: 24rpx;">领取时间：</view>
					<view class="timebox">{{item.start_time|dateFormat}}-{{item.end_time|dateFormat}}</view>
				</view>
				<view class="navbut" @click="getcoupon(item)">
					<!-- has_get==1 已领取-->
					<view
						:style="{'background':item.has_get==1?'#FFF':'','color':item.has_get==1?'#F94D29':'','border':item.has_get==1?'#F94D29 solid 1rpx':'none'}">
						{{item.has_get==1?'已领取':'立即领取'}}
					</view>
				</view>
				<view class="typebox">
					<text v-if="item.use_type==1">全平台可用</text>
					<text v-if="item.use_type==2">商城可用</text>
					<text v-if="item.use_type==3">外卖可用</text>
					<text v-if="item.use_type==4">商户可用</text>
					<text v-if="item.use_type==5">停车场可用</text>
					<text v-if="item.use_type==6">指定商品可用</text>
					<!-- {{item.use_type==1?'全平台':item.use_type==2?'商城':'外卖'}}可用 -->
				</view>
				<image class="ylq" v-if="item.has_get==1" src="../../static/ylq.png"></image>
			</view>
			<view class="collapse">
				<uni-collapse>
					<uni-collapse-item title="使用须知" :show-animation="true">
						<view class="content">
							<text class="text">{{item.ship_note}}</text>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<kong v-if="couponlist.length==0"></kong>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components: {
			kong
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list: ['全部', '全平台优惠券', '商城优惠券', '外卖优惠券'],
				navindex: '',
				couponlist: [], //优惠券列表
			}
		},
		filters: {
			//过滤器 用于格式化时间
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + "-" + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			changeindex(index) {
				this.navindex = index
				this.getlist()
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//获取列表
			getlist() {
				// use_type  使用范围 1全平台 2商城 3外卖 
				// coupon_type  类型 1满减券 2折扣券 3现金券 
				this.$http({
					url: 'api/Wechat/couponList',
					data: {
						use_type: this.navindex == 0 ? '' : this.navindex
					}
				}).then(res => {
					this.couponlist = res.data
				})
			},
			//领取优惠券
			getcoupon(item) {
				//has_get==1 已领取
				if (item.has_get == 1) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					this.$http({
						url: 'api/Wechat/getCoupon',
						data: {
							coupon_id: item.id + ""
						}
					}).then(res => {
						this.getlist()
					})
				}
			}

		}
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #F94D29 0%, #FFF 100%);
		background-repeat: no-repeat;
	}
</style>
<style lang="scss" scoped>
	.swiperbox {
		width: 100%;
		height: 96rpx;
		background-color: #FFF;
		position: fixed;
		top: 0;
		z-index: 9;

		.scroll-view_H {
			white-space: nowrap;
			width: 712rpx;
			margin: 23rpx auto;
			// height: 96rpx;
			background: #FFFFFF;

			.scroll-view-item_H {
				display: inline-block;
				width: fit-content;
				text-align: center;
				font-size: 36rpx;
				background: linear-gradient(90deg, #FFE9E1 0%, #FFF8F5 100%);
				padding: 0 24rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				margin: 0 6rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}

	.box {
		width: 690rpx;
		margin: 24rpx auto 0 auto;
		.listbox {
			background: url(https://zdcloud.zxkjnc.com/images/9cd8.png) no-repeat;
		
			width: 690rpx;
			height: 172rpx;
			background-size: 690rpx 172rpx;
			margin: 24rpx auto 0 auto;
			display: flex;
			position: relative;
		
			.pricebox {
				width: 164rpx;
				justify-content: center;
				display: flex;
				margin: 60rpx 0;
				font-size: 32rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #FE5326;
				align-items: baseline;
		
				>view {
					font-size: 40rpx;
				}
			}
		
			.couponinfo {
				width: 318rpx;
				margin-left: 22rpx;
		
				.rule {
					font-size: 34rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #222222;
					margin: 25rpx 0 14rpx 0;
				}
		
				.timebox {
					font-size: 18rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #555555;
					margin-top: 10rpx;
				}
			}
		
			.navbut {
				width: 186rpx;
				text-align: center;
				margin-top: 75rpx;
		
				>view {
					width: 146rpx;
					height: 54rpx;
					background: linear-gradient(90deg, #F99529 0%, #F94D29 100%);
					border-radius: 28rpx;
					text-align: center;
					line-height: 54rpx;
					font-size: 28rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #FFFFFF;
					margin: 0 auto;
				}
			}
		
			.typebox {
				position: absolute;
				top: 0;
				right: 0;
				width: 186rpx;
				height: 50rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #83431F;
				line-height: 50rpx;
			}
		
			.ylq {
				position: absolute;
				top: 0;
				right: 210rpx;
				width: 73rpx;
				height: 46rpx;
			}
		}
		.collapse{
			margin-top: 10rpx;
			.content {
					padding: 15rpx 30rpx;
					border-radius: 15rpx;
				}
			
				.text {
					margin: 0 auto;
					font-size: 26rpx;
					color: #666;
					border-radius: 15rpx;
					// line-height: 20rpx;
				}
		}
	}

	
</style>